import React from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2, Clock, AlertTriangle, BarChart3 } from 'lucide-react';

const Stats = ({ stats, darkMode }) => {
  const statItems = [
    {
      icon: BarChart3,
      label: '总任务',
      value: stats.total || 0,
      color: 'from-blue-500 to-blue-600',
      bgColor: 'bg-blue-500/20'
    },
    {
      icon: CheckCircle2,
      label: '已完成',
      value: stats.completed || 0,
      color: 'from-green-500 to-green-600',
      bgColor: 'bg-green-500/20'
    },
    {
      icon: Clock,
      label: '待处理',
      value: stats.pending || 0,
      color: 'from-yellow-500 to-yellow-600',
      bgColor: 'bg-yellow-500/20'
    },
    {
      icon: AlertTriangle,
      label: '高优先级',
      value: stats.high_priority || 0,
      color: 'from-red-500 to-red-600',
      bgColor: 'bg-red-500/20'
    }
  ];

  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ delay: 0.1 }}
      className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"
    >
      {statItems.map((item, index) => (
        <motion.div
          key={item.label}
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.1 + index * 0.05 }}
          whileHover={{ scale: 1.02 }}
          className="glass-effect p-4 text-center relative overflow-hidden"
        >
          <div className={`absolute inset-0 bg-gradient-to-br ${item.color} opacity-10`} />
          <div className="relative z-10">
            <div className={`w-12 h-12 ${item.bgColor} rounded-full flex items-center justify-center mx-auto mb-3`}>
              <item.icon className="w-6 h-6 text-white" />
            </div>
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.3 + index * 0.1, type: "spring" }}
              className={`text-2xl font-bold mb-1 ${darkMode ? 'text-white' : 'text-gray-800'}`}
            >
              {item.value}
            </motion.div>
            <div className={`text-sm ${darkMode ? 'text-white/70' : 'text-gray-600'}`}>
              {item.label}
            </div>
          </div>
        </motion.div>
      ))}
    </motion.div>
  );
};

export default Stats;